<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <!-- Data Tables -->
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
    .ibox-title h5 {
        display: block;
        float: none;
    }

    button {
        margin: 0 5px;
    }

    .input-group {
        width: 30%
    }

    #echarts-panel1 {
        border-right: 1px solid #eee;
    }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>告警管理</h5>
                    </div>
                    <div class="row mt20 mb20">
                        <div class="col-sm-8 btns">
                            <button type="button" class="col-sm-1 btn btn-primary btn-sm">今日</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">昨天</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">最近七天</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">本月</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">上月</button>
                            <!-- 日期 -->
                            <div class="form-group" id="date">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" value="2014-11-11" />
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" value="2014-11-17" />
                                </div>
                            </div>
                            <!-- 日期 -->
                        </div>
                        <div class="col-sm-4">
                            <button type="button" class="col-sm-offset-6 col-sm-2 btn btn-warning btn-sm">重置</button>
                            <button type="button" class="col-sm-2 btn btn-success btn-sm">搜索</button>
                        </div>
                    </div>
                    <div class="ibox-content fff" style="border-top: 1px solid #ccc">
                        <table class="table table-striped table-bordered table-hover dataTables">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>告警</th>
                                    <th>状态</th>
                                    <th>发生时间</th>
                                    <th>处理时间</th>
                                    <th>IP地址</th>
                                    <th>告警描述</th>
                                    <th>主机IP</th>
                                    <th>主机名</th>
                                    <th>所属业务系统</th>
                                    <th>责任人</th>
                                    <th>责任人联系方式</th>
                                    <th>告警来源</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>序号</th>
                                    <th>告警</th>
                                    <th>状态</th>
                                    <th>发生时间</th>
                                    <th>处理时间</th>
                                    <th>IP地址</th>
                                    <th>告警描述</th>
                                    <th>主机IP</th>
                                    <th>主机名</th>
                                    <th>所属业务系统</th>
                                    <th>责任人</th>
                                    <th>责任人联系方式</th>
                                    <th>告警来源</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 基础js -->
        <script src="../../js/jquery.min.js?v=2.1.4"></script>
        <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
        <script src="../../js/content.js?v=1.0.0"></script>
        <!-- 插件js -->
        <script src="../../js/handlebars-v3.0.1.js"></script>
        <script src="../../js/plugins/echarts/echarts-all.js"></script>
        <!-- Data Tables -->
        <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
        <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>
        <script src="../../js/plugins/datapicker/bootstrap-datepicker.js"></script>
        <!-- 模板 -->
        <script id="tpl" type="text/x-handlebars-template">
            {{#each echartsInfo}}
            <div class="row mt30">
                <div class="col-sm-8 bdr">
                    {{#each echartsInfoData}}
                    <div class="col-sm-6">
                        <div id="{{echarts-type}}" class="echarts"></div>
                    </div>
                    {{/each}}
                </div>
                <div class="col-sm-4">
                    <div id="echarts-pie1" class="echarts"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8 bdr">
                    <div id="echarts-line" class="echarts"></div>
                </div>
                <div class="col-sm-4">
                    <div id="echarts-pie2" class="echarts"></div>
                </div>
            </div>
            {{/each}}
        </script>
        <!-- 模板 -->
        <script type="text/javascript">
        $(function() {

            // Handlebars模板引擎数据
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板





            // 表格
            $('.dataTables-example').dataTable();
            $('.dataTables').DataTable({
                " dom": "Bfrtip",
                // " dom": "Bfrtip",
                // bLengthChange: false, //去掉每页显示多少条数据方法
                // bFilter: false, //去掉搜索框方法三：这种方法可以,
                "ajax": '../../data/dt.json',
                "columns": [
                    { "data": "id1" },
                    { "data": "id2" },
                    { "data": "id3" },
                    { "data": "id4" },
                    { "data": "id5" },
                    { "data": "id6" },
                    { "data": "id7" },
                    { "data": "id8" },
                    { "data": "id9" },
                    { "data": "id10" },
                    { "data": "id11" },
                    { "data": "id12" },
                    { "data": "id13" },
                ]
            });

            setTimeout(function() {
                $(".dataTables_wrapper .row .col-sm-3").addClass('col-sm-6').removeClass('col-sm-3')
            }, 50);


            // 日期筛选
            $(".btns button").click(function() {
                $(this).addClass('btn-primary').siblings().removeClass('btn-primary');
            });

            $('#date .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });


        })
        </script>
</body>

</html>